<template>
	<view class="template-message">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed :isBack="false"  backTitle=" ">
      <view class="" >
        <text class="tn-text-lg">消息</text>
       <!-- <text class="tn-text-xl tn-padding-left-sm tn-icon-group-circle"></text>  -->
      </view>
    </tn-nav-bar>
    
    <view class="tn-safe-area-inset-bottom tn-margin-bottom-sm" style="margin-top: 10rpx;" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
		<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding"  @click="tn('/pages/message/messageList/messageList')">
		  <view class="justify-content-item" >
		    <view class="tn-flex tn-flex-col-center tn-flex-row-left">
		      <view class="logo-pic">
		        <view class="logo-image" >
		          <view class="tn-shadow-blur" :style="'background-image:url(http://36.99.45.236:9088/profile/upload/sys-image/logo.png);width: 110rpx;height: 110rpx;background-size: cover;'" >
		          </view>
		        </view>
		      </view>
		      <view class="tn-padding-right tn-color-black" >
		        <view class="tn-padding-right tn-padding-left-sm tn-text-lg tn-text-bold">
		          系统消息
		        </view>
		        
		      </view>
		    </view>
		  </view>
		  <view class="justify-content-item" >
		    <view class="tn-flex tn-flex-row-right">
		      <view class=""></view>
		    </view>
		    <view class="tn-flex tn-flex-row-right">
		      <tn-badge v-if="noticeCount > 0" backgroundColor="tn-cool-bg-color-1" fontColor="tn-color-white" :radius="40" margin="10rpx 0rpx 10rpx 10rpx"><text>{{noticeCount}}</text></tn-badge>
		    </view>
		  </view>
		</view>
		
        <tn-swipe-action >
		<tn-swipe-action-item @click="testAction" v-for="(item,index) in messageList" :key="index" :name="index" :options="options">
          <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding" @click="tnChat(item.toUserId, item.id, item.nikeName)" >
            <view class="justify-content-item" >
              <view class="tn-flex tn-flex-col-center tn-flex-row-left">
                <view class="logo-pic" @click.stop="tn('/circlePages/king?userId='+item.toUserId)">
                  <view class="logo-image" >
                    <view class="tn-shadow-blur" :style="'background-image:url(' + item.headImg + ');width: 110rpx;height: 110rpx;background-size: cover;'" >
                    </view>
                  </view>
                </view>
                <view class="tn-padding-right tn-color-black" >
                  <view class="tn-padding-right tn-padding-left-sm tn-text-lg tn-text-bold">
                    {{item.nikeName}}
                  </view>
                  <view class="tn-padding-right tn-padding-top-xs tn-text-ellipsis tn-padding-left-sm">
                    <text class="tn-color-grey">{{item.unreadMsg}}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="justify-content-item" >
              <view class="tn-flex tn-flex-row-right">
                <view class="">{{item.unreadTime || ""}}</view>
              </view>
              <view class="tn-flex tn-flex-row-right">
                <tn-badge v-if="item.msgNum > 0" backgroundColor="tn-cool-bg-color-1" fontColor="tn-color-white" :radius="40" margin="10rpx 0rpx 10rpx 10rpx"><text>{{item.msgNum}}</text></tn-badge>
              </view>
            </view>
          </view>
		  </tn-swipe-action-item>
		  </tn-swipe-action>
        
		<view v-if="messageList.length <= 0" class="emptyMessage">
			您还没有聊天消息，赶快去首页遇见他（她）~
		</view>

    </view>
	</view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  import request from "@/common/request.js"
	export default {
    name: 'TemplateMessage',
    mixins: [template_page_mixin],
		data() {
			return {
				noticeCount:0,
				messageList:[],
				show1: false,
				options: [
				  {
					icon: 'delete',
					style: {
					  backgroundColor: '#E83A30',
					  width: '80rpx',
					  height: '80rpx',
					  margin: '0 12rpx',
					  borderRadius: '100rpx'
					}
				  }
				]
			}
		},
		
		mounted() {
			let _t =this
			uni.$on("loadMsg",function(res){
				_t.getMessage()
				_t.getNoticeCount()
			})
			
			uni.$on("receiveMsg",function(res){
				_t.getMessage()
				_t.getNoticeCount()
			})
			this.getMessage()
			this.getNoticeCount()
		},
		onLoad() {},
		methods: {
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			getNoticeCount(){
				request.get("friend/wx/notice/unReadCount",{}).then(res=>{
				  let _data = res[1]['data']
				  if(_data.code == 20000){
					  this.noticeCount = _data.data
				  }
				});
			},
			getMessage(){
				request.get("friend/wx/chatCenter/chatList",{}).then(res=>{
				  let _data = res[1]['data']
				  if(_data.code == 20000){
					  this.messageList = _data.data
				  }
				});
			},
			testAction(e){
				if(e.type == 'button'){
					let _t = this
					// 删除 消息
					request.delete("friend/wx/chatCenter/"+this.messageList[e.name].id).then(res=>{
						let _data = res[1]['data']
						if(_data.code == 20000){
							_t.$delete(_t.messageList, e.name)
						}
					})
				}
				
			},
		  // 弹出模态框
		  showModal(event) {
			this.openModal()
		  },
		  tnChat(id,chatId,name){
			  uni.navigateTo({
				url:"/pages/chat/chat?toUserId="+id+"&chatId="+chatId+"&name="+name
				// url:"/pages/chat/detail"
			  })
		  },
		  // 打开模态框
		  openModal() {
			this.show1 = true
		  },
		}
	}
</script>

<style lang="scss" scoped>
	.template-message{
	}
  
  .tn-message-fixed{
    position: fixed;
    background-color: rgba(255,255,255,1);
    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
    top: 0;
    width: 100%;
    transition: all 0.25s ease-out;
    z-index: 100;
  }
  
  /* 图标容器1 start */
  .icon1 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 90rpx;
        height: 90rpx;
        font-size: 60rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
        }
      }
    }
  }
  
  /* 用户头像 start */
  .logo-image {
    width: 90rpx;
    height: 90rpx;
    position: relative;
  }
  
  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    // box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    overflow: hidden;
    // background-color: #FFFFFF;
  }
  .emptyMessage{text-align: center;padding-top: 180px;}
</style>
